<template>
  <div>
    <div class="order-list">
      <h2>订单列表</h2>
      <div class="order" v-for="item in orderlist" :key="item.id">
        <div class="order-title">
          <div class="">订单创建{{ item.order_time }}</div>
          <div>订单号 {{ item.order_id }}</div>
          <div>应付金额 {{ item.total_price }}</div>
        </div>
        <div class="order-wrapper">
          <div
            class="order-content"
            v-for="ele in item.goods_info"
            :key="ele.id"
          >
            <!-- 我们是要渲染item中的goods_info属性 -->
            <!-- 又因为goods_info 是一个数组 这里用到了嵌套循环 -->
            <!-- 分析出来这个属性返回的是一个json格式的内容 是相当不友好
          两个解决方案
          -叫后台改 返回的数据格式,返回是整的对象[] {}
          -前端自行处理 我们需要先把json格式先转换 再循环 -->

            <div class="content-left">
              <div class="left-img">
                <img :src="ele.s_goods_photos[0].path" alt="" />
              </div>
              <div>{{ ele.goods_name }}</div>
              <div>{{ ele.price }}X{{ ele.num }}</div>
            </div>
          </div>
          <div class="content-right">
            <div @click="dellist(item)">删除订单</div>
            <button @click="goPay(item)">立即付款</button>
          </div>
        </div>
      </div>
    </div>
    <div class="block">
      <el-pagination
        background
        layout="prev, pager, next"
        @current-change="handleChange"
        :total="total"
        :page-size="limit"
      >
      </el-pagination>
      <!-- total是设置分页的总条数 跟 count 相关 是订单列表的总数
          page-size 限制每页的显示数量 跟limit相关
          @current-change="handleChange" 获取当前页码  跟page相关
          根据这个页码去请求对应的订单列表数据 -->
    </div>
  </div>
  <!-- 当我们制作完了列表的渲染之后,发现如果列表有100条数据的时候,整个页面就会变得非常高
  用户体验极差 
  解决方案:分页
  100条数据
  1页10条
  底部 会有10个按钮
   显示对应的10条数据
   用户只需点击下一页即可查看
   更重要的是可以优化我们当前页的性能
   请求100条 请求10条块？

   当用户点击下一页的时候 再发请求
  -->
</template>

<script>
import { getOrder2 } from "../assets/request";
export default {
  data() {
    return {
      orderlist: [],
      total: 0,
      value: false,
      page: 0,
      limit: 2,
    };
  },
  methods: {
    goPay(item) {
      console.log(item, "去付款");
      //在订单中已经有商品的信息和地址信息
      //在订单列表中,我们是以集合的形式渲染的
      // 当用户点击某个订单的立即支付按钮后,
      // 1.获取对应的订单id
      // item.id
      // 2.跳转页面的,传递到订单支付的页面中
      this.$router.push({
        path: "/order/orderpay",
        query: {
          id: item.id,
        },
      });
      // 3.根据这个订单的id获取具体单条的订单信息
      //
    },
    dellist() {},
    handleChange(val) {
      console.log(val);
      this.page = val;
      this.getOlist();
    },
    async getOlist() {
      let res = await getOrder2({
        page: this.page,
        limit: this.limit,
      });
      // 先做一层数据的处理 再赋值
      this.total = res.count;
      this.orderlist = res.rows.map((ele) => {
        return {
          id: ele.id,
          order_time: ele.order_time,
          order_id: ele.order_id,
          total_price: ele.total_price,
          goods_info: JSON.parse(ele.goods_info),
        };
      });
      // console.log(this.orderlist, "经过处理的数据结构");
    },
  },
  async created() {
    this.getOlist();
  },
};
</script>

<style lang="scss" scoped>
.order-list {
  text-align: center;
  width: 1226px;
  margin: 0 auto;
  .order {
    width: 100%;
    border: 1px solid #333;
    margin-bottom: 20px;
    .order-title {
      display: flex;
      justify-content: space-around;
      // align-items: center;
      line-height: 60px;
      font-size: 20px;
      background: pink;
    }
    .order-wrapper {
      display: flex;
      justify-content: space-around;
      align-items: center;
      .order-content {
        .content-left {
          .left-img {
            img {
              width: 100px;
              height: auto;
            }
          }
        }
      }
    }
  }
}
.block {
  text-align: center;
}
</style>